<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>槐佳辉的博客</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../static/css/typo.css">
    <link rel="stylesheet" href="../static/css/my.css">
    <link rel="stylesheet" href="../static/lib/prism/prism.css">
    <!--animate动画css引入-->
    <link rel="stylesheet" href="../static/css/animate.css"/>
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css">
    <style>
        body {
            width: 100%;
            height: 100vh;
            background-color:#000;
            background-image: radial-gradient(circle at top right, rgba(15, 7, 14, 0.83), #0f070e),
            radial-gradient(circle at 20% 80%, rgba(15, 7, 14, 0.67), #0f070e);
        }
        canvas {
            position: fixed;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<canvas width="700" height="634"></canvas>
<!--特效 script-->
<script>
    const STAR_COUNT = ( window.innerWidth + window.innerHeight ) / 8,
        STAR_SIZE = 3,
        STAR_MIN_SCALE = 0.2,
        OVERFLOW_THRESHOLD = 50;

    const canvas = document.querySelector( 'canvas' ),
        context = canvas.getContext( '2d' );

    let scale = 1, // device pixel ratio
        width,
        height;

    let stars = [];

    let pointerX,
        pointerY;

    let velocity = { x: 0, y: 0, tx: 0, ty: 0, z: 0.0005 };

    let touchInput = false;

    generate();
    resize();
    step();

    window.onresize = resize;
    canvas.onmousemove = onMouseMove;
    canvas.ontouchmove = onTouchMove;
    canvas.ontouchend = onMouseLeave;
    document.onmouseleave = onMouseLeave;

    function generate() {

        for( let i = 0; i < STAR_COUNT; i++ ) {
            stars.push({
                x: 0,
                y: 0,
                z: STAR_MIN_SCALE + Math.random() * ( 1 - STAR_MIN_SCALE )
            });
        }

    }

    function placeStar( star ) {

        star.x = Math.random() * width;
        star.y = Math.random() * height;

    }

    function recycleStar( star ) {

        let direction = 'z';

        let vx = Math.abs( velocity.x ),
            vy = Math.abs( velocity.y );

        if( vx > 1 || vy > 1 ) {
            let axis;

            if( vx > vy ) {
                axis = Math.random() < vx / ( vx + vy ) ? 'h' : 'v';
            }
            else {
                axis = Math.random() < vy / ( vx + vy ) ? 'v' : 'h';
            }

            if( axis === 'h' ) {
                direction = velocity.x > 0 ? 'l' : 'r';
            }
            else {
                direction = velocity.y > 0 ? 't' : 'b';
            }
        }

        star.z = STAR_MIN_SCALE + Math.random() * ( 1 - STAR_MIN_SCALE );

        if( direction === 'z' ) {
            star.z = 0.1;
            star.x = Math.random() * width;
            star.y = Math.random() * height;
        }
        else if( direction === 'l' ) {
            star.x = -OVERFLOW_THRESHOLD;
            star.y = height * Math.random();
        }
        else if( direction === 'r' ) {
            star.x = width + OVERFLOW_THRESHOLD;
            star.y = height * Math.random();
        }
        else if( direction === 't' ) {
            star.x = width * Math.random();
            star.y = -OVERFLOW_THRESHOLD;
        }
        else if( direction === 'b' ) {
            star.x = width * Math.random();
            star.y = height + OVERFLOW_THRESHOLD;
        }

    }

    function resize() {

        scale = window.devicePixelRatio || 1;

        width = window.innerWidth * scale;
        height = window.innerHeight * scale;

        canvas.width = width;
        canvas.height = height;

        stars.forEach( placeStar );

    }

    function step() {

        context.clearRect( 0, 0, width, height );

        update();
        render();

        requestAnimationFrame( step );

    }

    function update() {

        velocity.tx *= 0.96;
        velocity.ty *= 0.96;

        velocity.x += ( velocity.tx - velocity.x ) * 0.8;
        velocity.y += ( velocity.ty - velocity.y ) * 0.8;

        stars.forEach( ( star ) => {

            star.x += velocity.x * star.z;
            star.y += velocity.y * star.z;

            star.x += ( star.x - width/2 ) * velocity.z * star.z;
            star.y += ( star.y - height/2 ) * velocity.z * star.z;
            star.z += velocity.z;

            // recycle when out of bounds
            if( star.x < -OVERFLOW_THRESHOLD || star.x > width + OVERFLOW_THRESHOLD || star.y < -OVERFLOW_THRESHOLD || star.y > height + OVERFLOW_THRESHOLD ) {
                recycleStar( star );
            }

        } );

    }

    function render() {

        stars.forEach( ( star ) => {

            context.beginPath();
            context.lineCap = 'round';
            context.lineWidth = STAR_SIZE * star.z * scale;
            context.strokeStyle = 'rgba(255,255,255,'+(0.5 + 0.5*Math.random())+')';

            context.beginPath();
            context.moveTo( star.x, star.y );

            var tailX = velocity.x * 2,
                tailY = velocity.y * 2;

            // stroke() wont work on an invisible line
            if( Math.abs( tailX ) < 0.1 ) tailX = 0.5;
            if( Math.abs( tailY ) < 0.1 ) tailY = 0.5;

            context.lineTo( star.x + tailX, star.y + tailY );

            context.stroke();

        } );

    }

    function movePointer( x, y ) {

        if( typeof pointerX === 'number' && typeof pointerY === 'number' ) {

            let ox = x - pointerX,
                oy = y - pointerY;

            velocity.tx = velocity.tx + ( ox / 8*scale ) * ( touchInput ? 1 : -1 );
            velocity.ty = velocity.ty + ( oy / 8*scale ) * ( touchInput ? 1 : -1 );

        }

        pointerX = x;
        pointerY = y;

    }

    function onMouseMove( event ) {

        touchInput = false;

        movePointer( event.clientX, event.clientY );

    }

    function onTouchMove( event ) {

        touchInput = true;

        movePointer( event.touches[0].clientX, event.touches[0].clientY, true );

        event.preventDefault();

    }

    function onMouseLeave() {

        pointerX = null;
        pointerY = null;

    }
</script>



<!--导航-->
<nav  th:replace="_fragments :: menu(1)" class="ui inverted attached segment m-padded-tb-mini">
    <div class="ui container">
        <!--手机端(页面缩小)stackable可堆叠   mobile reversed -->
        <div class="ui inverted secondary stackable menu">
            <a class="ui teal header item">HuiBlog</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i> 首页</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i> 分类</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="tags icon "></i> 标签</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="tags icon "></i> 归档</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
            <div class="right item">
                <div class="ui icon transparent  input">
                    <input type="text" class="m-text-write" placeholder="搜索...">
                    <i class="search icon inverted"></i>

                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top">
        <i class="sidebar icon m-mobile-show"></i>
    </a>
</nav>

<!--中间内容-->
<div id="waypoint" class="ui m-container-small m-padded-tb-large animated tada delay-2s">
    <div class="ui container">
        <!--头部-->
        <div class="ui top attached segment" style="background: powderblue">
            <!--小按钮 avatar圆形小框  horizontal表示内组件水平放置 -->
            <div class="ui horizontal link list">
                <div class="item">
                    <img src="../static/images/wechat.jpg" class="ui avatar image" alt="">
                    <div class="content"><a href="#" class="header m-text-mini">槐佳辉</a></div>
                </div>
                <div class="item">
                    <i class="calendar icon"></i>2020-01-01
                </div>
                <div class="item">
                    <i class="eye icon">9999</i>
                </div>
            </div>
        </div>
        <!--图片区域-->
        <div class="ui attached segment" style="background: powderblue">
            <!--fluid表示撑满整个容器 rounded表示图片边角为圆角-->
            <img src="../static/images/wechat.jpg" class="ui fluid rounded image" alt="">
        </div>

        <!--主要内容区域-->
        <div class="ui js-toc-content attached segment" style="background: powderblue">
            <!--添加原创按钮位于右侧  basic表示没有segment边框-->
            <div class="ui right  aligned basic segment">
                <div class="ui orange basic label">原创</div>
            </div>
            <h2 id="content-title" class="ui aligned center header ">Git 常用命令笔记</h2>
            <div id="content" class=" typo typo-selection m-padded-tb-large-responsive">
                    <!--language-css 来嵌入代码块-->
                    <pre><code class="language-css"># 在当前目录新建一个Git代码库
$ git init

# 新建一个目录，将其初始化为Git代码库
$ git init [project-name]

# 下载一个项目和它的整个代码历史
$ git clone [url]
</code></pre>
                    <h3 id="content-config">
                       配置</h3>
                    <pre><code class="language-css"># 显示当前的Git配置
$ git config --list

# 编辑Git配置文件
$ git config -e [--global]

# 设置提交代码时的用户信息
$ git config [--global] user.name "[name]"
$ git config [--global] user.email "[email address]"
</code></pre>
                    <h3 id="content-delete">
                        增加/删除文件</h3>
                    <pre><code class="language-css"># 添加指定文件到暂存区
$ git add [file1] [file2] ...

# 添加指定目录到暂存区，包括子目录
$ git add [dir]

# 添加当前目录的所有文件到暂存区
$ git add .

# 添加每个变化前，都会要求确认
# 对于同一个文件的多处变化，可以实现分次提交
$ git add -p

# 删除工作区文件，并且将这次删除放入暂存区
$ git rm [file1] [file2] ...

# 停止追踪指定文件，但该文件会保留在工作区
$ git rm --cached [file]

# 改名文件，并且将这个改名放入暂存区
$ git mv [file-original] [file-renamed]
</code></pre>
                    <h3>代码提交</h3>
                    <pre><code class="language-css"># 提交暂存区到仓库区
            $ git commit -m [message]

            # 提交暂存区的指定文件到仓库区
            $ git commit [file1] [file2] ... -m [message]

            # 提交工作区自上次commit之后的变化，直接到仓库区
            $ git commit -a

            # 提交时显示所有diff信息
            $ git commit -v

            # 使用一次新的commit，替代上一次提交
            # 如果代码没有任何新变化，则用来改写上一次commit的提交信息
            $ git commit --amend -m [message]

            # 重做上一次commit，并包括指定文件的新变化
            $ git commit --amend [file1] [file2] ...
            </code></pre>
                    <h3>分支</h3>
                    <pre><code class="language-css"># 列出所有本地分支
            $ git branch

            # 列出所有远程分支
            $ git branch -r

            # 列出所有本地分支和远程分支
            $ git branch -a

            # 新建一个分支，但依然停留在当前分支
            $ git branch [branch-name]

            # 新建一个分支，并切换到该分支
            $ git checkout -b [branch]

            # 新建一个分支，指向指定commit
            $ git branch [branch] [commit]

            # 新建一个分支，与指定的远程分支建立追踪关系
            $ git branch --track [branch] [remote-branch]

            # 切换到指定分支，并更新工作区
            $ git checkout [branch-name]

            # 切换到上一个分支
            $ git checkout -

            # 建立追踪关系，在现有分支与指定的远程分支之间
            $ git branch --set-upstream [branch] [remote-branch]

            # 合并指定分支到当前分支
            $ git merge [branch]

            # 选择一个commit，合并进当前分支
            $ git cherry-pick [commit]

            # 删除分支
            $ git branch -d [branch-name]

            # 删除远程分支
            $ git push origin --delete [branch-name]
            $ git branch -dr [remote/branch]
            </code></pre>
                    <h3>标签</h3>
                    <pre><code class="language-css"># 列出所有tag
            $ git tag

            # 新建一个tag在当前commit
            $ git tag [tag]

            # 新建一个tag在指定commit
            $ git tag [tag] [commit]

            # 删除本地tag
            $ git tag -d [tag]

            # 删除远程tag
            $ git push origin :refs/tags/[tagName]

            # 查看tag信息
            $ git show [tag]

            # 提交指定tag
            $ git push [remote] [tag]

            # 提交所有tag
            $ git push [remote] --tags

            # 新建一个分支，指向某个tag
            $ git checkout -b [branch] [tag]
            </code></pre>
                    <h3>查看信息</h3>
                    <pre><code class="language-css"># 显示有变更的文件
            $ git status

            # 显示当前分支的版本历史
            $ git log

            # 显示commit历史，以及每次commit发生变更的文件
            $ git log --stat

            # 搜索提交历史，根据关键词
            $ git log -S [keyword]

            # 显示某个commit之后的所有变动，每个commit占据一行
            $ git log [tag] HEAD --pretty=format:%s

            # 显示某个commit之后的所有变动，其"提交说明"必须符合搜索条件
            $ git log [tag] HEAD --grep feature

            # 显示某个文件的版本历史，包括文件改名
            $ git log --follow [file]
            $ git whatchanged [file]

            # 显示指定文件相关的每一次diff
            $ git log -p [file]

            # 显示过去5次提交
            $ git log -5 --pretty --oneline

            # 显示所有提交过的用户，按提交次数排序
            $ git shortlog -sn

            # 显示指定文件是什么人在什么时间修改过
            $ git blame [file]

            # 显示暂存区和工作区的差异
            $ git diff

            # 显示暂存区和上一个commit的差异
            $ git diff --cached [file]

            # 显示工作区与当前分支最新commit之间的差异
            $ git diff HEAD

            # 显示两次提交之间的差异
            $ git diff [first-branch]...[second-branch]

            # 显示今天你写了多少行代码
            $ git diff --shortstat "@{0 day ago}"

            # 显示某次提交的元数据和内容变化
            $ git show [commit]

            # 显示某次提交发生变化的文件
            $ git show --name-only [commit]

            # 显示某次提交时，某个文件的内容
            $ git show [commit]:[filename]

            # 显示当前分支的最近几次提交
            $ git reflog
            </code></pre>
                    <h3>远程同步</h3>
                    <pre><code class="language-css"># 下载远程仓库的所有变动
            $ git fetch [remote]

            # 显示所有远程仓库
            $ git remote -v

            # 显示某个远程仓库的信息
            $ git remote show [remote]

            # 增加一个新的远程仓库，并命名
            $ git remote add [shortname] [url]

            # 取回远程仓库的变化，并与本地分支合并
            $ git pull [remote] [branch]

            # 上传本地指定分支到远程仓库
            $ git push [remote] [branch]

            # 强行推送当前分支到远程仓库，即使有冲突
            $ git push [remote] --force

            # 推送所有分支到远程仓库
            $ git push [remote] --all
            </code></pre>
                    <h3>撤销</h3>
                    <pre><code class="language-css"># 恢复暂存区的指定文件到工作区
            $ git checkout [file]

            # 恢复某个commit的指定文件到暂存区和工作区
            $ git checkout [commit] [file]

            # 恢复暂存区的所有文件到工作区
            $ git checkout .

            # 重置暂存区的指定文件，与上一次commit保持一致，但工作区不变
            $ git reset [file]

            # 重置暂存区与工作区，与上一次commit保持一致
            $ git reset --hard

            # 重置当前分支的指针为指定commit，同时重置暂存区，但工作区不变
            $ git reset [commit]

            # 重置当前分支的HEAD为指定commit，同时重置暂存区和工作区，与指定commit一致
            $ git reset --hard [commit]

            # 重置当前HEAD为指定commit，但保持暂存区和工作区不变
            $ git reset --keep [commit]

            # 新建一个commit，用来撤销指定commit
            # 后者的所有变化都将被前者抵消，并且应用到当前分支
            $ git revert [commit]

            暂时将未提交的变化移除，稍后再移入
            $ git stash
            $ git stash pop
            </code></pre>
                    <h3>其他</h3>
                    <pre><code class="language-css"># 生成一个可供发布的压缩包
            $ git archive
            </code></pre>

            </div>
            <!--标签-->
            <div class="">
                <!--文章下边标签-->
                <!--left poinging label 指向左侧的小边框 basic 边框内为空 teal颜色-->
                <div class="ui  basic  teal  left pointing label">
                    git
                </div>
                <!--赞赏-->
                <div id="payButton" class="ui center aligned basic segment">
                    <!--circular组件圆角效果, floated 浮动为center-->
                    <button class="ui center floated teal circular button">赞赏</button>
                </div>
                <!--二维码 ui flowing popup transition hidden 在下边绑定popup弹出 -->
                <div class="ui payQR flowing popup transition hidden basic segment">
                    <div class="ui basic label" style="background: powderblue">
                        <div class="ui images">
                            <div class="image">
                                <img src="../static/images/wechat.jpg" alt="" class="ui rounded bordered image" style="width: 120px">
                                <div style="font-size: small">支付宝赞赏</div>
                            </div>
                            <div class="image">
                                <img src="../static/images/wechat.jpg" alt="" class="ui rounded bordered image" style="width: 120px">
                                <div style="font-size: small">微信支付</div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!--博客信息-->
        <div class="ui attached positive message" style="background: powderblue">
            <div class="ui middle aligned grid">
                <div class="eleven wide column">
                    <ui class="list">
                        <li>作者: 槐佳辉 (请勿打扰)</li>
                        <li>发表时间：2020-00-00 00：00</li>
                        <li>版本声明： 自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
                        <li>公众号转载：请在文末添加作者公众号二维码</li>
                    </ui>
                </div>
                <div class="five wide column">
                    <!--rounded圆角 bordered 紧密边框, right floated 往右边浮动-->
                    <img src="../static/images/wechat.jpg" alt="" class="ui right floated rounded bordered image" style="width: 110px">
                </div>
            </div>
        </div>
        <!--留言区域-->
        <!--区域顶端为top  底部为bottom-->
        <div id="comment-container" class="ui bottom attached segment" style="background: powderblue">
            <div class="ui teal basic segment">
                <div class="ui comments">
                    <h3 class="ui dividing header"><trans oldtip="Comments" newtip="评论意见">评论意见</trans></h3>
                    <div class="comment">
                        <a class="avatar">
                            <img src="../static/images/wechat.jpg">
                        </a>
                        <div class="content">
                            <a class="author"><trans oldtip="Matt" newtip="小灰灰">小灰灰</trans></a>
                            <div class="metadata">
                                <span class="date"><trans oldtip="Today at 5:42PM" newtip="今天下午5：42">今天下午5：42</trans></span>
                            </div>
                            <div class="text"><trans oldtip=" How artistic! " newtip="多么艺术啊！">多么艺术啊！</trans></div>
                            <div class="actions">
                                <a class="reply"><trans oldtip="Reply" newtip="答复">答复</trans></a>
                            </div>
                        </div>
                    </div>
                    <div class="comment">
                        <a class="avatar">
                            <img src="../static/images/wechat.jpg">
                        </a>
                        <div class="content">
                            <a class="author"><trans oldtip="Elliot Fu" newtip="槐佳辉">槐佳辉</trans></a>
                            <div class="metadata">
                                <span class="date"><trans oldtip="Yesterday at 12:30AM" newtip="昨天中午12：30">昨天中午12：30</trans></span>
                            </div>
                            <div class="text">
                                <p><trans oldtip="This has been very useful for my research. Thanks as well!" newtip="这对我的研究非常有用。也谢谢你！">这对我的研究非常有用。也谢谢你！</trans></p>
                            </div>
                            <div class="actions">
                                <a class="reply"><trans oldtip="Reply" newtip="答复">答复</trans></a>
                            </div>
                        </div>
                        <div class="comments">
                            <div class="comment">
                                <a class="avatar">
                                    <img src="../static/images/wechat.jpg">
                                </a>
                                <div class="content">
                                    <a class="author"><trans oldtip="Jenny Hess" newtip="槐小辉" style="">槐小辉</trans></a>
                                    <div class="metadata">
                                        <span class="date"><trans oldtip="Just now" newtip="刚才">刚才</trans></span>
                                    </div>
                                    <div class="text"><trans oldtip=" Elliot you are always so right :) " newtip="埃利奥特，你总是那么正确：)" style="">埃利奥特，你总是那么正确：)</trans></div>
                                    <div class="actions">
                                        <a class="reply"><trans oldtip="Reply" newtip="答复">答复</trans></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="comment">
                        <a class="avatar">
                            <img src="../static/images/wechat.jpg">
                        </a>
                        <div class="content">
                            <a class="author"><trans oldtip="Joe Henderson" newtip="槐灰灰">槐灰灰</trans></a>
                            <div class="metadata">
                                <span class="date"><trans oldtip="5 days ago" newtip="5天前">5天前</trans></span>
                            </div>
                            <div class="text"><trans oldtip=" Dude, this is awesome. Thanks so much " newtip="伙计，这太棒了。非常感谢" style="">伙计，这太棒了。非常感谢</trans></div>
                            <div class="actions">
                                <a class="reply"><trans oldtip="Reply" newtip="答复">答复</trans></a>
                            </div>
                        </div>
                    </div>
                    <form class="ui reply form">
                        <div class="field">
                            <textarea name="content" placeholder="请输入留言内容"></textarea>
                        </div>
                        <div class="fields">
                            <div class="field m-mobile-wide">
                                <!--icon input icon嵌入text内 left right 规定位置-->
                                <div class="ui left icon input m-margin-bottom-small ">
                                    <i class="user icon"></i>
                                    <input type="text" name="username" placeholder="姓名">
                                </div>
                            </div>
                            <div class="ui field left icon input m-margin-bottom-small m-mobile-wide">
                                <i class="mail icon"></i>
                                <input type="text" name="username" placeholder="请输入邮箱">
                            </div>
                            <!--div和button 都设置m-mobile-wide手机小窗口100%宽度-->
                            <div class="field m-margin-tb-left m-margin-bottom-small m-mobile-wide">
                                <button class="ui teal button m-mobile-wide"><i class="edit icon"></i>提交</button>
                            </div>
                        </div>


                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!--浮动导航栏-->
<div id="toolbar" class="ui vertical icon buttons m-fixed m-absolute-middle-right">
    <button type="button" class="ui toc blue button">目录</button>
    <a href="#comment-container" class="ui blue button">留言</a>
    <!--加icon图标居中-->
    <button id="wechatButton" class="ui icon blue button"><i class="weixin big icon"></i></button>
    <div id="toTop" class="ui blue icon button"><i class="chevron up icon"></i></div>
    <div id="toBottom" class="ui blue icon button"><i class="chevron down icon"></i></div>
    <!--生成二维码区域-->
    <div id="qrCode" class="ui hidden wechat popup transition flowing segment m-margin-tb" style="background-color: blue">
        <!--<img src="images/headpage.gif" class="ui img">微信-->
    </div>
</div>
<!--浮动导航生成的目录-->
<div class="ui toc-container  flowing popup transition hidden">
    <ol class="js-toc">
    </ol>
</div>
<!--底部footer-->
<FOOTER th:replace="_fragments :: footer" id="finally" class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui divided stackable inverted grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px">
                    </div>
                </div>
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header m-opacity-min">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事：</a>
                    <a href="#" class="item">用户故事：</a>
                    <a href="#" class="item">用户故事：</a>

                </div>
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header m-opacity-min">联系我</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">Email: 1748756566@qq.com</a>
                    <a href="#" class="item">QQ: 1748756566</a>
                    <a href="#" class="item">微信： BXY4543</a>

                </div>
            </div>
            <div class="five wide column">
                <h4 class="ui inverted header m-opacity-min">介绍</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini">我的个人博客 ： hello，world</p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p id="finally" class="m-text-thin m-text-spaced m-opacity-mini">Copyright 2019-2020 MyBlog</p>
    </div>

</FOOTER>

<!--/*/<th:block th:replace="_fragments :: script">/*/-->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
    <!--设置滚动位置: flesler/jquery.scrollTo   github-->
    <script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
    <script src="../static/lib/prism/prism.js"></script>
    <script src="../static/lib/tocbot/tocbot.min.js"></script>
    <script src="../static/lib/qrcode/qrcode.min.js"></script>
    <script src="../static/lib/waypoints/jquery.waypoints.min.js"></script>
<!--/*/</th:block>/*/-->

<script>
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');//如有这个Class则去除，没有则加入
    });
    $('#payButton').popup({
        popup: $('.payQR.popup'),
        on: 'click',
        position: 'bottom center'
    });
    $('#wechatButton').popup({
        popup: $('.wechat.popup'),
        position: 'left center'
    });
    tocbot.init({
        // Where to render the table of contents.
        tocSelector: '.js-toc',
        // Where to grab the headings to build the table of contents.
        contentSelector: '.js-toc-content',
        // Which headings to grab inside of the contentSelector element.
        headingSelector: 'h1, h2, h3',
        // For headings inside relative or absolute positioned containers within content.
        hasInnerContainers: true,
    });
    /*position 位置区域  top>bottom>left>right>center*/

    $('.toc.button').popup({
        popup: $('.toc-container.popup'),
        on: 'click',
        position: 'left center',
        variation: "mini",
    });
    var qrcode = new QRCode("qrCode", {
        text: "https://www.baidu.com",//设置二维码跳转地址
        width: 110,
        height: 110,
        colorDark : "#000000",
        colorLight : "#f3f6ff",
        correctLevel : QRCode.CorrectLevel.H
    });
    /*----设置移动平滑----$(element).scrollTo(target[,duration][,settings]);*/
    $('#toTop').click(function () {
        $(window).scrollTo(0,500);
    });
    $('#toBottom').click(function () {
        $(window).scrollTo($('#finally'),500);
    });

    /*-----滚动监测    当滚动到某一位置执行某一功能-----*/
    var waypoint = new Waypoint({
        element: document.getElementById('waypoint'),
        handler: function(direction) {
            if (direction=='down'){
                $('#toolbar').show(500);
            }
            else {$('#toolbar').hide(500)};
            console.log('Scrolled to waypoint!'+direction)
        }
    })
</script>
</body>
</html>